<template>
  <InnerDialog v-model="willUploadAppVersionDialog" :width="'800'" top="5vh">
    <template #header>
      上传新版本
    </template>
    <template #default>
      <div>
        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">选择平台:&nbsp;&nbsp;</div>
          <el-radio-group v-model="uploadAppVersionPlatform" size="">
            <el-radio-button value="Android" >
                <div class="flex flex-row justify-start items-center">
                  <span>Android&nbsp;</span> 
                  <el-image class="w-6 h-6" src="http://file.vict5220.top/Mwd9R92rmW__2025_03_21__10_25_35.png?attname=android%20(3).png"></el-image>
                </div>
              </el-radio-button>
              <el-radio-button value="IOS" >
                <div class="flex flex-row justify-start items-center">
                  <span>IOS&nbsp;</span> 
                  <el-image class="w-6 h-6" src="http://file.vict5220.top/EXe6aEWwmF__2025_03_21__10_21_27.png?attname=IOS.png"></el-image>
                </div>
              </el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">版本号:&nbsp;&nbsp;</div>
          <el-input class="w-80"
          v-model="uploadAppVersionNumber" placeholder="请输入版本号"></el-input>
        </div>
        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">功能介绍:&nbsp;&nbsp;</div>
          <el-input type="textarea" class="w-80" :rows="10" 
          v-model="uploadAppVersionInfo" placeholder="请输入功能介绍"></el-input>
        </div>


        <div v-if="uploadAppVersionPlatform==Platform.Android" class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">更新方式:&nbsp;&nbsp;</div>
          <el-radio-group v-model="uploadAppVersionMethod" size="">
            <el-radio :value="UpdateMethod.APK" >
                <div class="flex flex-row justify-start items-center">
                  <span>{{UpdateMethod.APK}}&nbsp;</span> 
                </div>
              </el-radio>
              <el-radio :value="UpdateMethod.WGT" >
                <div class="flex flex-row justify-start items-center">
                  <span>{{UpdateMethod.WGT}}&nbsp;</span> 
                </div>
              </el-radio>
          </el-radio-group>
        </div>

        <div v-if="uploadAppVersionPlatform==Platform.IOS" class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">更新方式:&nbsp;&nbsp;</div>
          <el-radio-group v-model="uploadAppVersionMethod" size="">
            <el-radio :value="UpdateMethod.IPA" >
                <div class="flex flex-row justify-start items-center">
                  <span>{{UpdateMethod.IPA}}&nbsp;</span> 
                </div>
              </el-radio>
              <el-radio :value="UpdateMethod.WGT" >
                <div class="flex flex-row justify-start items-center">
                  <span>{{UpdateMethod.WGT}}&nbsp;</span> 
                </div>
              </el-radio>
          </el-radio-group>
        </div>

        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">是否强制更新:&nbsp;&nbsp;</div>
          <el-radio-group v-model="uploadAppVersionIsForce" size="">
            <el-radio :value="IsForce.yes" >
                <div class="flex flex-row justify-start items-center">
                  <span>是&nbsp;</span> 
                </div>
              </el-radio>
              <el-radio :value="IsForce.no" >
                <div class="flex flex-row justify-start items-center">
                  <span>否&nbsp;</span> 
                </div>
              </el-radio>
          </el-radio-group>
        </div>

        <div v-if="uploadAppVersionPlatform==Platform.Android" class="flex flex-row justify-start items-start m-4">
          <div class="w-36 min-w-36 required flex justify-start">上传APK更新包:&nbsp;&nbsp;</div>
          <div class="w-full flex flex-col">
            <div class="flex flex-row justify-start items-center">
              <QiniuUpload @getUrl="(url)=>{uploadAppVersionFileUrl = url}">
                <el-button size="small" type="default" class="ml-0">上传文件<el-icon class="el-icon--right"><Upload /></el-icon></el-button>
              </QiniuUpload>
              <el-icon @click="uploadAppVersionFileUrl = ''" class="ml-1 cursor-pointer hover:text-gray-600 text-gray-400"><CircleClose /></el-icon>
            </div>
            <el-input clearable class="pt-1 text-xs" v-model="uploadAppVersionFileUrl"></el-input>
          </div>
        </div>

        <div v-if="uploadAppVersionPlatform==Platform.IOS" class="flex flex-row justify-start items-start m-4">
          <div class="w-36 min-w-36 required flex justify-start">上传IPA更新包:&nbsp;&nbsp;</div>
          <div class="w-full flex flex-col">
            <div class="flex flex-row justify-start items-center">
              <QiniuUpload @getUrl="(url)=>{uploadAppVersionFileUrl = url}">
                <el-button size="small" type="default" class="ml-0">上传文件<el-icon class="el-icon--right"><Upload /></el-icon></el-button>
              </QiniuUpload>
              <el-icon @click="uploadAppVersionFileUrl = ''" class="ml-1 cursor-pointer hover:text-gray-600 text-gray-400"><CircleClose /></el-icon>
            </div>
            <el-input clearable class="pt-1 text-xs" v-model="uploadAppVersionFileUrl"></el-input>
          </div>
        </div>

        <div class="flex flex-row justify-start items-start m-4">
          <div class="w-36 min-w-36 required flex justify-start">上传WGT更新包:&nbsp;&nbsp;</div>
          <div class="w-full flex flex-col">
            <div class="flex flex-row justify-start items-center">
              <QiniuUpload @getUrl="(url)=>{uploadAppVersionWgtUrl = url}">
                <el-button size="small" type="default" class="ml-0">上传文件<el-icon class="el-icon--right"><Upload /></el-icon></el-button>
              </QiniuUpload>
              <el-icon @click="uploadAppVersionWgtUrl = ''" class="ml-1 cursor-pointer hover:text-gray-600 text-gray-400"><CircleClose /></el-icon>
            </div>
            <el-input clearable class="pt-1 text-xs" v-model="uploadAppVersionWgtUrl"></el-input>
          </div>
        </div>

      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="uploadAppVersionCancel">取消</el-button>
        <el-button type="primary" @click="uploadAppVersionSave">保存</el-button>
      </div>
    </template>
  </InnerDialog>

  <InnerDialog v-model="willUpdateAppVersionDialog" :width="'800'" top="5vh">
    <template #header>
      修改版本
    </template>
    <template #default>
      <div>
        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">选择平台:&nbsp;&nbsp;</div>
          <el-radio-group disabled v-model="updateAppVersion!.platform" size="">
            <el-radio-button value="Android" >
                <div class="flex flex-row justify-start items-center">
                  <span>Android&nbsp;</span> 
                  <el-image class="w-6 h-6" src="http://file.vict5220.top/Mwd9R92rmW__2025_03_21__10_25_35.png?attname=android%20(3).png"></el-image>
                </div>
              </el-radio-button>
              <el-radio-button value="IOS" >
                <div class="flex flex-row justify-start items-center">
                  <span>IOS&nbsp;</span> 
                  <el-image class="w-6 h-6" src="http://file.vict5220.top/EXe6aEWwmF__2025_03_21__10_21_27.png?attname=IOS.png"></el-image>
                </div>
              </el-radio-button>
          </el-radio-group>
        </div>
        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">版本号:&nbsp;&nbsp;</div>
          <el-input class="w-80" disabled
          v-model="updateAppVersion!.versionStr" placeholder="请输入版本号"></el-input>
        </div>
        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">功能介绍:&nbsp;&nbsp;</div>
          <el-input type="textarea" class="w-80" :rows="10" 
          v-model="updateAppVersion!.info" placeholder="请输入功能介绍"></el-input>
        </div>


        <div v-if="updateAppVersion!.platform==Platform.Android" class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">更新方式:&nbsp;&nbsp;</div>
          <el-radio-group v-model="updateAppVersion!.updateMethod" size="">
            <el-radio :value="UpdateMethod.APK" >
                <div class="flex flex-row justify-start items-center">
                  <span>{{UpdateMethod.APK}}&nbsp;</span> 
                </div>
              </el-radio>
              <el-radio :value="UpdateMethod.WGT" >
                <div class="flex flex-row justify-start items-center">
                  <span>{{UpdateMethod.WGT}}&nbsp;</span> 
                </div>
              </el-radio>
          </el-radio-group>
        </div>

        <div class="flex flex-row justify-start items-center m-4">
          <div class="w-36 required flex justify-start">是否强制更新:&nbsp;&nbsp;</div>
          <el-radio-group v-model="updateAppVersion!.isForce" size="">
            <el-radio :value="IsForce.yes" >
                <div class="flex flex-row justify-start items-center">
                  <span>是&nbsp;</span> 
                </div>
              </el-radio>
              <el-radio :value="IsForce.no" >
                <div class="flex flex-row justify-start items-center">
                  <span>否&nbsp;</span> 
                </div>
              </el-radio>
          </el-radio-group>
        </div>

        <div class="flex flex-row justify-start items-start m-4">
          <div class="w-36 min-w-36 required flex justify-start">上传APK更新包:&nbsp;&nbsp;</div>
          <div class="w-full flex flex-col">
            <div class="flex flex-row justify-start items-center">
              <QiniuUpload @getUrl="(url)=>{updateAppVersion!.fileUrl = url}">
                <el-button size="small" type="default" class="ml-0">上传文件<el-icon class="el-icon--right"><Upload /></el-icon></el-button>
              </QiniuUpload>
              <el-icon v-if="updateAppVersion?.status=='test'" @click="updateAppVersion!.fileUrl = ''" class="ml-1 cursor-pointer hover:text-gray-600 text-gray-400"><CircleClose /></el-icon>
            </div>
            <el-input clearable class="pt-1 text-xs" v-model="updateAppVersion!.fileUrl"></el-input>
          </div>
        </div>

        <div class="flex flex-row justify-start items-start m-4">
          <div class="w-36 min-w-36 required flex justify-start">上传WGT更新包:&nbsp;&nbsp;</div>
          <div class="w-full flex flex-col">
            <div class="flex flex-row justify-start items-center">
              <QiniuUpload @getUrl="(url)=>{updateAppVersion!.wgtUrl = url}">
                <el-button size="small" type="default" class="ml-0">上传文件<el-icon class="el-icon--right"><Upload /></el-icon></el-button>
              </QiniuUpload>
              <el-icon v-if="updateAppVersion?.status=='test'" @click="updateAppVersion!.wgtUrl = ''" class="ml-1 cursor-pointer hover:text-gray-600 text-gray-400"><CircleClose /></el-icon>
            </div>
            <el-input clearable class="pt-1 text-xs" v-model="updateAppVersion!.wgtUrl"></el-input>
          </div>
        </div>

      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateAppVersionCancel">取消</el-button>
        <el-button type="primary" @click="updateAppVersionSave">保存</el-button>
      </div>
    </template>
  </InnerDialog>

  <InnerDialog v-model="showQrCodeDialog" :width="'300'">
    <template #header>
      {{showQrCodeVersion}}
    </template>
    <template #default>
      <div class="flex flex-row justify-center items-center">
        <qrcode-vue :value="showQrCode" :size="200" level="H" />
      </div>
    </template>
    <template #footer>
      
    </template>
  </InnerDialog>

  <div class="inBodyFullHeight flex flex-col justify-start items-start w-full ">
    <div class="p-4 flex flex-row justify-start">
      <el-card class="w-44 h-28">
        <div class="flex flex-col">
          <span class="text-sm text-[#666] font-bold">当前版本</span>
          <div class="flex flex-row justify-start items-end">
            <el-image class="w-8 h-8" src="http://file.vict5220.top/Mwd9R92rmW__2025_03_21__10_25_35.png?attname=android%20(3).png"></el-image>
            <span v-loading="selectNowVersionLoading" class="pt-2 text-2xl font-bold">{{selectNowVersionVO?.android?.versionStr}}</span>
          </div>
        </div>

      </el-card>

      <el-card class="w-44 h-28 ml-4">
        <div class="flex flex-col">
          <span class="text-sm text-[#666] font-bold">当前版本</span>
          <div class="flex flex-row justify-start items-end">
            <el-image class="w-8 h-8" src="http://file.vict5220.top/EXe6aEWwmF__2025_03_21__10_21_27.png?attname=IOS.png"></el-image>
            <span v-loading="selectNowVersionLoading" class="pt-2 text-2xl font-bold">{{selectNowVersionVO?.ios?.versionStr}}</span>
          </div>
        </div>

      </el-card>
    </div>
    <div class="p-4" >
      <el-card :class="(isCollapse?' w-[calc(100vw-64px-2rem)] ':' w-[calc(100vw-200px-2rem)] ')+' h-[calc(100vh-88px-11rem)] '">
        <div class="flex flex-col">
          <span class="text-xl font-bold">版本历史</span>

          <div class="pt-4" v-permission="permissionList.uploadAppVersion">
            <el-button type="primary" @click="willUploadAppVersion"><el-icon>
                <UploadFilled />
              </el-icon>&nbsp;上传新版本&nbsp;</el-button>
          </div>

          <div class="pt-4 flex flex-row justify-start items-center">
            <span class="w-12">
              平台:
            </span>
            <el-radio-group @change="select" v-model="appVersionListAO.platform" size="">
              <el-radio-button value="Android" >
                <div class="flex flex-row justify-start items-center">
                  <span>Android&nbsp;</span> 
                  <el-image class="w-6 h-6" src="http://file.vict5220.top/Mwd9R92rmW__2025_03_21__10_25_35.png?attname=android%20(3).png"></el-image>
                </div>
              </el-radio-button>
              <el-radio-button value="IOS" >
                <div class="flex flex-row justify-start items-center">
                  <span>IOS&nbsp;</span> 
                  <el-image class="w-6 h-6" src="http://file.vict5220.top/EXe6aEWwmF__2025_03_21__10_21_27.png?attname=IOS.png"></el-image>
                </div>
              </el-radio-button>
            </el-radio-group>
          </div>

          <div class="pt-4" v-loading="selectLoading">
            <el-table class="h-[calc(100vh-31rem)]" :border="true" :data="pageInfo?.list" style="width: 100%"
              :row-key="(row:any)=>{row.id}">
              <el-table-column prop="versionStr" label="版本号" width="120" show-overflow-tooltip>
                <template #default="{row}">
                  <div class="flex flex-row justify-start items-center">
                    <span>{{row.versionStr}}</span>
                    <div class="ml-2">
                      <el-tag :type="row.status=='test'?'warning':'success'">
                        {{row.statusName}}
                      </el-tag>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="releaseTime" label="发布时间" width="180" show-overflow-tooltip> </el-table-column>
              <el-table-column label="更新内容" width="180" show-overflow-tooltip>
                <template #default="{row}">
                  <div class="scrollbar-style">
                    <el-input resize="none" readonly type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" :row="6" v-model="row.info"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="updateMethodName" label="更新方式" width="100">
              </el-table-column>
              <el-table-column prop="isForceName" label="是否强制更新" width="120">
              </el-table-column>
              <el-table-column prop="fileUrl" label="APK二维码" width="120" >
                <template #default="{row}">
                  <qrcode-vue 
                  class="cursor-pointer hover:p-1 hover:border-2 hover:border-solid hover:border-blue-700" 
                  @Click="showQrCodeDialog=true;showQrCode=row.fileUrl;showQrCodeVersion=row.versionStr" 
                  :value="row.fileUrl" :size="100" level="H" />
                </template>
              </el-table-column>
              <el-table-column prop="fileUrl" label="APK下载地址" width="120">
                <template #default="{row}">
                  <el-tooltip 
                    placement="top" 
                    :content="row.fileUrl"
                  ><span class="line-clamp-1">{{row.fileUrl}}</span></el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="wgtUrl" label="WGT下载地址" width="120">
                <template #default="{row}">
                  <el-tooltip 
                    placement="top" 
                    :content="row.wgtUrl"
                  ><span class="line-clamp-1">{{row.wgtUrl}}</span></el-tooltip>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="180">
                <template #default="scope">
                  <el-button v-if="scope.row.status=='release'" type="warning" @click="callbackAppVersion(scope.row)"
                    v-permission="permissionList.callbackAppVersion" link>撤回发布</el-button>
                  <el-button v-if="scope.row.status=='test'" type="warning" @click="releaseAppVersion(scope.row)"
                    v-permission="permissionList.releaseAppVersion" link>发布</el-button>
                  <el-button type="primary" @click="willUpdateAppVersion(scope.row)"
                    v-permission="permissionList.appVersionUpdate" link>编辑</el-button>
                  <el-button type="danger" @click="deleteAppVersion(scope.row.id)"
                    v-permission="permissionList.appVersionDelete" link>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="m-4 flex flex-row justify-end" v-permission="permissionList.selectBuser">
            <el-pagination 
                background 
                v-model:current-page="appVersionListAO.pageNum"
                v-model:page-size="appVersionListAO.pageSize"
                layout="total, sizes, prev, pager, next, jumper" 
                :page-count="Number(pageInfo?.totalPage)"
                :total="Number(pageInfo?.total)"
                @size-change="select"
                @current-change="select"
                prev-text="上一页"
                next-text="下一页"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="ApVersion">
import QrcodeVue from "qrcode.vue"
import { useApVersionHooks } from "./ApVersionHooks"
import { permissionList } from "@/config/PermissionConfig"
import InnerDialog from '@/components/utils/InnerDialog.vue';
import QiniuUpload from "@/components/utils/QiniuUpload.vue";
import { UpdateMethod, Platform, IsForce } from "./ApVersionTypes";
let {
  willUploadAppVersion,
  willUploadAppVersionDialog,
  uploadAppVersionPlatform,
  uploadAppVersionMethod,
  uploadAppVersionIsForce,
  uploadAppVersionCancel,
  uploadAppVersionSave,
  uploadAppVersionInfo,
  uploadAppVersionNumber,
  uploadAppVersionFileUrl,
  uploadAppVersionWgtUrl,

  appVersionListAO,
  select,
  selectLoading,
  pageInfo,

  deleteAppVersion,

  willUpdateAppVersion,
  updateAppVersion,
  willUpdateAppVersionDialog,
  updateAppVersionCancel,
  updateAppVersionSave,

  showQrCodeDialog,
  showQrCode,
  showQrCodeVersion,

  releaseAppVersion,
  callbackAppVersion,
  selectNowVersionVO,
  selectNowVersionLoading,
  isCollapse,
} = useApVersionHooks();

</script>

<style scoped>
.checkBg span{
  background-color: blue !important;
}
.scrollbar-style ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-style ::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.scrollbar-style ::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 3px;
}

.scrollbar-style ::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
